import { each } from 'lodash'
import { nFormatter } from '@/utils/nFormatter'

const candlestickStart = 0

export default {
  backgroundColor: '#1c213e',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    },
    appendToBody: true,
    formatter: function(val = []) {
      let _str = ''
      each(val, item => {
        const { seriesType, marker, name, value } = item

        if (seriesType === 'candlestick') {
          const [, open, close, top, bottom] = value
          _str += `
              ${name}<br/>
              ${marker}00:00:${open}<br/>
              ${marker}23:59:${close}<br/>
              ${marker}最大值:${top}<br/>
              ${marker}最小值:${bottom}<br/> 
            `
        } else if (seriesType === 'line') {
          _str += `${marker} 每日用气量: ${value}<br/>`
        }
      })
      return _str
    }
  },
  dataZoom: [
    {
      type: 'inside',
      start: candlestickStart,
      end: 100
    },
    {
      show: false,
      type: 'slider',
      start: candlestickStart,
      top: '90%',
      end: 100,
      height: 20
    }
  ],
  xAxis: {
    type: 'category',
    scale: true,
    boundaryGap: false,
    axisLine: {
      onZero: false,
      lineStyle: {
        color: '#31597d'
      }
    },
    splitNumber: 20,
    min: 'dataMin',
    max: 'dataMax',
    splitLine: {
      show: false
    }
  },
  yAxis: [
    {
      scale: true,
      name: '累计读数',
      position: 'left',
      splitArea: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#31597d',
          type: 'dashed'
        }
      },
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: '#31597d'
        }
      },
      axisLabel: {
        formatter: function(val) {
          return nFormatter(val)
        }
      }
    },
    {
      scale: true,
      name: '每日用气量',
      position: 'right',
      splitArea: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#31597d',
          type: 'dashed'
        }
      },
      nameTextStyle: {
        color: '#fff'
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: '#31597d'
        }
      },
      axisLabel: {
        formatter: function(val) {
          return nFormatter(val)
        }
      }
    }
  ],
  series: [
    {
      type: 'candlestick',
      roam: true,
      itemStyle: {
        color0: '#ec0000',
        borderColor0: '#8A0000',
        color: '#00da3c',
        borderColor: '#008F28'
      },
      markPoint: {
        label: {
          formatter: function(param) {
            return '缺失'
          }
        }
      }
    },
    {
      name: '每日用气量',
      type: 'line',
      yAxisIndex: 1,
      smooth: true
    },
    {
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      markPoint: {
        label: {
          fontSize: 14,
          formatter: function(param) {
            const { name } = param
            return name
          }
        }
      }
    }
  ],
  grid: {
    top: 40,
    left: '6%',
    right: '5%',
    bottom: '15%'
  }
}
